<template>
  <div class="bigbox">
    <div class="top">
      <el-button type="primary" @click="addFn">添加</el-button>
    </div>
    

    <el-table  :data="getCategoryLists" border style="width: 100%">
      <el-table-column prop="id" label="ID" > </el-table-column>
      <el-table-column prop="name" label="分类名称"> </el-table-column>
      <el-table-column prop="address" label="分类级别" >顶级分类</el-table-column>
      
      <el-table-column prop="wap_banner_url" label="图片" > 
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <img :src="scope.row.wap_banner_url" alt="">
            </div>
          </template>
      </el-table-column>

      <el-table-column prop="is_show" label="是否显示" > 
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
             {{
                scope.row.is_show === 1 ? "是" : "否"
              }}
            </div>
          </template>
      </el-table-column>
      <el-table-column prop="sort_order" label="排序" > </el-table-column>
      <el-table-column prop="address" label="操作" > 
          <template slot-scope="scope">
        <el-button
        type="primary"
          @click="editFn(scope.row.id)">编辑</el-button>
      </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {getCategoryLists} from "../../request/httpApi"
export default {
    data(){
        return{
            getCategoryLists:[]
        }
    },
    methods:{
        addFn(){
            this.$router.push('/addcategory');
        },
        editFn(e){
          this.$router.push(`/editcategory/${e}`)
        }
    },
    created(){
        getCategoryLists().then((res)=>{
            console.log(res);
            if(res.errno===0){
                this.getCategoryLists = res.data
                // console.log(this.getCategoryLists);
            }
        })
        
    }
};
</script>

<style lang="less" scoped>
.bigbox{
  .top{
    padding-bottom: 20px;
  }
  .el-tag--medium {
      color: #333;
      background: #fff;
      border: none;
    }
    img{
        width: 80px;
        height: 40px;
    }
}

</style>
